<style>
    .ly-chart-top-list .list {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .ly-chart-top-list .list-item {
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999999;
    }

    .ly-chart-top-list .list-item .order {
        margin-left: 6px;
        margin-right: 8px;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        border-radius: 4px;
        color: #000;
        text-align: center;
    }


</style>
<template>
    <div class="ly-chart-top-list" v-loading="loading">
        <div class="list" :style="{'height': height+'px'}">
            <div class="list-item hide-txt" v-for="(item,index) in data" :key="index">
                <span :style="{'background-color':color.length>index?color[index]:'','color':color.length>index?'#fff':'#333333'}"  class="order">{{index+1}}</span>
                <span class="name">{{item.name}} </span>
                <span class="num"> ({{item.value}})</span>
            </div>
        </div>
    </div>
</template>
<script>

    //这里定义组件
    Rap.define([], function () {
        return {
            name: 'ly-chart-top-list',
            props:
                {
                    noGlobal:Boolean,
                    height: {
                        'default': 310
                    },
                    params: {
                        'default': function () {
                            return {}
                        }
                    },
                    date: {
                        'default': function () {
                            return {}
                        }
                    },
                    //数据链接
                    link: {
                        'default': '',
                    },
                    //x 取值
                    key_name: {
                        'default': 'g'
                    },
                    //y 取值
                    key_value: {
                        'default': 'c'
                    },
                    //line 类型时背景色
                    color: {
                        default: function () {
                            if (Ly.chart && Ly.chart.color) {
                                return Ly.chart.color;
                            }
                            return ['#FF4319', '#FF7619', '#FFA119'];
                        }
                    }
                },
            data: function () {

                return {
                    data: [],
                    loading: false,
                    global_params: Ly.chart.global_params
                }
            },
            created: function () {
                var loadDebounce = _.debounce(this.load, 100);
                this.loadDebounce = loadDebounce;
                loadDebounce();
            },
            watch: {
                params: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                },
                date: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                },
                global_params: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                }
            },
            methods: {
                download: function () {

                },
                load: function () {
                    var me = this;
                    var link = me.link;
                    if (link.indexOf('?') === -1) {
                        link += '?';
                    } else {
                        var end = link.substring(link.length - 1, link.length);
                        if (end !== '?' && end !== '&') {
                            link += "&";
                        }
                    }
                    for (var key in me.date) {
                        link += (key + "=" + me.date[key] + "&");
                    }
                    var params = me.params;
                    if(!this.noGlobal){
                        params = _.extend({},Ly.chart.global_params,me.params);
                    }
                    me.loading = true;
                    axios.post(link, params).then(function (rs) {
                        me.data = [];
                        _.each(rs.data.data, function (item) {
                            var it = {
                                name: item[me.key_name],
                                value: item[me.key_value]
                            };
                            me.data.push(it);
                        });
                        me.loading = false;
                    });

                }
            }
        }
    })
</script>
